<template>
  <view class="edit-profile">
    <view class="form-group">
      <label for="username">姓名:</label>
      <input type="text" id="username" v-model="username" placeholder="请输入您的姓名">
    </view>
    <view class="form-group">
      <label for="avatar">头像:</label> 
	  <view v-if="userImageUrl" class="avatar-preview">
        <image :src="userImageUrl" alt="头像预览"></image>
      </view>
	  <!-- 文件选择和上传 -->
	     <!-- <uni-file-picker
	        mode="select"
	        @change="fileChange"
	        @success="uploadSuccess"
	        @fail="uploadFail"
	        :source-type="['album', 'camera']">
	        <button size="small" type="primary">点击上传</button>
	      </uni-file-picker> -->
		  <button @click="chooseImage">选择图片</button>
		      <view v-if="imagePath">选中的图片路径: {{ imagePath }}</view>
<!--      <input type="file" accept="image/*" id="avatar" @change="uploadAvatar" / -->
    </view>
    <button @click="saveProfile">保存</button>
  </view>
</template>

<script>
	import axios from 'axios';
	// 假设你使用的是axios库发送网络请求
	import service from '../../utils/request.js';
export default {
  data() {
    return {
		file:'',
		imageFile:null,
      username: '', // 用户输入的姓名
      userImageUrl: '', // 用户上传的头像URL
	  imagePath: ''
    };
  },
  mounted() {
      this.getImageUrl();
    },
  methods: {
	 async getImageUrl() {
	     try {
	       // 假设 authToken 是从本地存储或全局状态中获取的认证令牌
	       const authToken = localStorage.getItem('authToken');
	       console.log("authToken"+authToken);
	       // 设置请求头，将认证令牌添加到Authorization字段
	       const headers = {
	         'Authorization': `${authToken}`
	       };
	       console.log("head"+JSON.stringify(headers));
	       // 发起GET请求到后端的userInfo接口
	       const response = await service.get('/user/userInfo', {
	         headers: headers
	       });
	       console.log("res!"+JSON.stringify(response));
	 	  this.userImageUrl=response.data.userPic;
	 	  console.log(this.userImageUrl);
	 	   // 使用 $nextTick 确保在数据更新后立即更新视图
	 	      this.$nextTick(() => {
	 	        
	 	      });
	   //     // 检查响应状态
	   //     if (response && response.data && response.data.success) {
	   //       // 假设后端返回的Result对象中包含success字段和data字段
	   //       // data字段包含实际的用户信息
	   //       this.user = response.data.data;
	   //     } else {
	   //       console.error('Failed to retrieve user info');
	   //     }
	     } catch (error) {
	       console.error('Failed to fetch user info', error);
	       // 处理错误，例如显示错误信息或进行重试
	 	  this.userImageUrl = '';
	     }
	   
	 },
    // 保存用户信息
    async saveProfile() {
		console.log(this.userImageUrl);
        // 假设 authToken 是从本地存储或全局状态中获取的认证令牌
        const authToken = localStorage.getItem('authToken');
        console.log("authToken"+authToken);
        // 设置请求头，将认证令牌添加到Authorization字段
        const headers = {
          'Authorization': `${authToken}`
        };
        console.log("Save head"+JSON.stringify(headers));
        // 发起GET请求到后端的userInfo接口
        const response = await service.patch('/user/updateAvatar',null, {
			   params: {
			      avatarUrl: this.userImageUrl, // 将头像URL作为URL参数传递
			    },
			  headers: headers, // 将headers作为请求配置的一部分
			});
		this.$nextTick(() => {
		       uni.switchTab({
		         url: '/pages/my/my'
		       });
		     }); 
    },
 //    // 上传头像
 //  // 假设这是在 uniapp 组件的 methods 中
  
 // uploadAvatar(event) {
 //     const files = event.target.files;
 //     if (files.length > 0) {
 //       const file = files[0];
 //       if (file.type.match('image.*')) {
 //         this.imageFile = file;
 //         // 实现上传逻辑
 //         const formData = new FormData();
 //         formData.append('file', this.imageFile);
 
 //         uni.uploadFile({
 //           url: 'http://localhost:8089/file/upload', // 你的上传接口地址
 //           filePath: this.imageFile.path, // 文件路径
 //           name: 'file', // 后端接收的字段名
 //           formData: formData,
           
 //           success: (res) => {
 //             // 上传成功
 //             const resData = JSON.parse(res.data);
 //             if (resData.success) {
 //               // 处理返回结果，例如保存图片URL
 //               this.imageUrl = resData.data.url;
 //               uni.showToast({
 //                 title: '上传成功',
 //               });
 //             } else {
 //               // 处理错误
 //               uni.showToast({
 //                 title: '上传失败',
 //                 icon: 'none'
 //               });
 //             }
 //           },
 //           fail: (err) => {
 //             // 上传失败
 //             console.error('上传失败：', err);
 //             uni.showToast({
 //               title: '上传失败',
 //               icon: 'none'
 //             });
 //           }
 //         });
 //       } else {
 //         uni.showToast({
 //           title: '请选择图片文件',
 //           icon: 'none'
 //         });
 //       }
 //     } else {
 //       uni.showToast({
 //         title: '未选择文件',
 //         icon: 'none'
 //       });
 //     }
 //   }
  chooseImage() {
       const that = this;
       uni.chooseImage({
         count: 1, // 默认9
         sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
         sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
         success: (res) => {
           that.imagePath = res.tempFilePaths[0]; // 存储图片路径
		   console.log("wwwwww"+that.imagePath);
           that.uploadImage(); // 调用上传图片的方法
         }
       });
     },
     uploadImage() {
       const that = this;
       uni.uploadFile({
         url: 'http://localhost:8089/file/upload', // 你的后端上传接口地址
         filePath: that.imagePath,
         name: 'file',
         success: (res) => {
           if (res.statusCode === 200) {
             const data = JSON.parse(res.data);
			 console.log("aaaaa"+JSON.stringify(data));
			 this.userImageUrl=data.data;
			 console.log(this.userImageUrl);
             if (data.code === 0) { // 假设0是成功的状态码
               uni.showToast({
                 title: '上传成功',
                 icon: 'success'
               });
             } else {
               uni.showToast({
                 title: '上传失败',
                 icon: 'none'
               });
             }
           }
         },
         fail: (err) => {
           console.log('上传失败：', err);
           uni.showToast({
             title: '上传失败',
             icon: 'none'
           });
         }
       });
     }
   }
       // // 文件选择变化时触发
       //   fileChange(event) {
       //     const file = event.detail.file; // 获取选择的文件对象
       //     if (file) {
       //       this.file = file;
       //       this.uploadFile();
       //     }
       //   },
       //   // 上传文件的方法
       //   uploadFile() {
       //     if (!this.file) return;
       //     // 创建 FormData 对象
       //     const formData = new FormData();
       //     // 向 FormData 对象添加文件，file.path 是文件的临时文件路径
       //     formData.append('file', {
       //       uri: this.file.uri,
       //       name: this.file.name
       //     });
       //     // 可以继续添加其他参数，例如：
       //     // formData.append('description', '这是文件描述');
       
       //     // 发起文件上传请求
       //     uni.uploadFile({
       //       url: 'http://localhost:8089/file/upload', // 后端上传接口地址
       //       filePath: this.file.uri, // 文件的本地路径
       //       name: 'file', // 后端接收的字段名，这应与后端接收文件参数的字段名一致
       //       formData: formData,
       //       header: {
       //         // 如果需要身份验证，可以在这里添加请求头
       //         'Authorization': localStorage.getItem('authToken')
       //       },
       //       success: (res) => {
       //         // 上传成功
       //         const resData = JSON.parse(res.data);
       //         if (resData.success) {
       //           this.imageUrl = resData.data.url;
       //           uni.showToast({
       //             title: '上传成功'
       //           });
       //         } else {
       //           uni.showToast({
       //             title: '上传失败',
       //             icon: 'none'
       //           });
       //         }
       //       },
       //       fail: (err) => {
       //         // 上传失败
       //         console.error('文件上传失败：', err);
       //         uni.showToast({
       //           title: '上传失败',
       //           icon: 'none'
       //         });
       //       }
       //     });
       //   },
         // 上传成功和失败的提示方法...
       // uploadSuccess() {
       //   // 上传成功的提示
       //   uni.showToast({
       //     title: '上传成功'
       //   });
       // },
       // uploadFail() {
       //   // 上传失败的提示
       //   uni.showToast({
       //     title: '上传失败',
       //     icon: 'none'
    //   });
        
 // }
};
</script>

<style scoped>
.edit-profile {
  max-width: 400px;
  margin: 20px auto;
  padding: 30px;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  text-align: center;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

.input-field {
  width: 100%;
  padding: 12px 20px;
  font-size: 16px;
  color: #333;
  background: #f7f7f7;
  border: 2px solid #e1e1e1;
  border-radius: 24px;
  transition: border-color 0.3s ease;
}

.input-field:focus {
  outline: none;
  border-color: #007bff;
}

.avatar-preview {
  margin-top: 15px;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f9f9f9;
}

.avatar-image {
  width: 100px; /* 或其他合适大小 */
  height: 100px; /* 保持宽高比 */
  object-fit: cover;
  border-radius: 8px;
}

.save-button {
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: #6cbf48;
  border: none;
  border-radius: 24px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.save-button:hover {
  background-color: #5fa134;
}
</style>